.hero-service-card{
    right: 80PX;
    /* انتقال به سمت راست برج */
    margin-right: 0;
    margin-left: 10px;  /* فاصله از برج (۱۰px) */
  }
 

  .hero-logo img{
    width: 80.00006103515625px;
    height: 16.1419734954834px;
    opacity: 1;
    left: 24px;
  }

  .Header-Line{
    width: 145.00001560745773;
    opacity: 1;
    top: 41.99px;
    left: 10px;
    border-width: 1px;
    margin-left: 60px;
  }

  .hero-btn-start{
    width: 134px;
    height: 48px;
    opacity: 1;
    top: 264px;
    left: 24px;
    border-radius: 20px;
    padding-top: 12px;
    padding-right: 20px;
    padding-bottom: 12px;
    padding-left: 20px;
    gap: 8px;
    /*text*/
    font-family: Avenir;
    font-weight: 500;
    font-style: Medium;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0px;
    text-align: center;
  }

  .hero-kicker{
    font-family: Avenir;
    font-weight: 400;
    font-style: Roman;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 100%;
    letter-spacing: 0px;
  }

  .hero-title{
    font-family: Avenir;
    font-weight: 900;
    font-style: Black;
    font-size: 36px !important;
    line-height: 100%;
    letter-spacing: 0px;
  }

  .hero-subtitle{ 
    max-width: 320px;
    font-family: Avenir;
    font-weight: 400;
    font-style: Roman;
    font-size: 18px;
    line-height:  2rem !important;
    letter-spacing:0px;
  }
  .hero-services-list{
  top: var(--services-top);
  right: var(--services-right);
  gap: 7px;
}
/*------------------------------------- Start Default value-------------------------------------------------*/
.hero-service-icon:nth-child(1){ --icon-x: var(--icon1-x); }
.hero-service-icon:nth-child(2){ --icon-x: var(--icon2-x); }
.hero-service-icon:nth-child(3){ --icon-x: var(--icon3-x); }
.hero-service-icon:nth-child(4){ --icon-x: var(--icon4-x); }
.hero-service-icon:nth-child(5){ --icon-x: var(--icon5-x); }
.hero-service-icon:nth-child(6){ --icon-x: var(--icon6-x); }
.hero-service-icon:nth-child(7){ --icon-x: var(--icon7-x); }

:root{
     /* hero services positioning */
    --services-top: 250px;
    --services-right: 273px;

    /* icon horizontal offsets */
    --icon1-x: 45px;
    --icon2-x: 28px;
    --icon3-x:18px;
    --icon4-x: 5px;
    --icon5-x: -5px;
    --icon6-x: -10px;
    --icon7-x: -15px;
  }
     .hero-header{margin-bottom: 10px !important;}
  /*------------------------------------- End Default value-------------------------------------------------*/
  /*=================================End Base =========================================*/
/* =========================================================
   TABLET OVERRIDES
   این فایل فقط برای بازه‌های تبلت لود میشه (576–991.98)
   نکته: بلوک‌های کامنت‌شده رو بعد از تست، از کامنت دربیار.
========================================================= */

/* =========================================
   TABLET BASE
========================================= */
.hero{
  /* اگر تصویر جدا برای تبلت داری اینو عوض کن */
  background-image: url("../../img/hero-bg-tablet.webp");
  background-position: top center;
   min-height: 750px;
 /* min-height:800px; /* ادامه منطقی از 575 */
}
 
.hero-services-list{
  top: var(--services-top);
  right: var(--services-right);
  gap: 7px;
}

/*------------------------------------- Start Default value-------------------------------------------------*/
.hero-service-icon:nth-child(1){ --icon-x: var(--icon1-x); }
.hero-service-icon:nth-child(2){ --icon-x: var(--icon2-x); }
.hero-service-icon:nth-child(3){ --icon-x: var(--icon3-x); }
.hero-service-icon:nth-child(4){ --icon-x: var(--icon4-x); }
.hero-service-icon:nth-child(5){ --icon-x: var(--icon5-x); }
.hero-service-icon:nth-child(6){ --icon-x: var(--icon6-x); }
.hero-service-icon:nth-child(7){ --icon-x: var(--icon7-x); }

:root{
  /* hero services positioning (Tablet Base - شروع از مقدار 575 موبایل) */
  --services-top: 437px;
  --services-right: 353px;

  /* icon horizontal offsets (فعلاً ثابت؛ اگر لازم شد در تبلت هم تغییر بده) */
  --icon1-x: 45px;
  --icon2-x: 28px;
  --icon3-x: 18px;
  --icon4-x: 5px;
  --icon5-x: -5px;
  --icon6-x: -10px;
  --icon7-x: -15px;
}
.hero-nav-pill {display: none !important;}
/*------------------------------------- End Default value-------------------------------------------------*/
/*=================================End Base =========================================*/


/*=================== START: Small Tablet / Mini | 576–767 ===================*/
/* Devices: iPad Mini, small Android tablets (portrait) */

/* NOTE:
   الگوی 5px-5px دقیقاً مثل موبایل:
   min: Npx
   max: (N+4.98)px
*/

/*=================== START: Small Tablet Step | 576–580 ===================*/
@media (min-width: 576px) and (max-width: 580.98px){
  :root{ --services-top: 210px; --services-right: 210px; }
}
/*=================== END: Small Tablet Step | 576–580 ===================*/

/*=================== START: Small Tablet Step | 581–585 ===================*/
@media (min-width: 581px) and (max-width: 585.98px){
  :root{ --services-top: 205px; --services-right: 215px; }
}
/*=================== END: Small Tablet Step | 581–585 ===================*/

/*=================== START: Small Tablet Step | 586–590 ===================*/
@media (min-width: 586px) and (max-width: 590.98px){
  :root{ --services-top: 205px; --services-right: 210px; }
}
/*=================== END: Small Tablet Step | 586–590 ===================*/

/*=================== START: Small Tablet Step | 591–595 ===================*/
@media (min-width: 591px) and (max-width: 595.98px){
  :root{ --services-top: 220px; --services-right: 215px; }
}
/*=================== END: Small Tablet Step | 591–595 ===================*/

/*=================== START: Small Tablet Step | 596–600 ===================*/
@media (min-width: 596px) and (max-width: 600.98px){
  :root{ --services-top: 220px; --services-right: 218px; }
}
/*=================== END: Small Tablet Step | 596–600 ===================*/

/*=================== START: Small Tablet Step | 601–605 ===================*/
@media (min-width: 601px) and (max-width: 605.98px){
  :root{ --services-top: 220px; --services-right: 218px; }
}
/*=================== END: Small Tablet Step | 601–605 ===================*/

/*=================== START: Small Tablet Step | 606–610 ===================*/
@media (min-width: 606px) and (max-width: 610.98px){
  :root{ --services-top: 220px; --services-right: 217px; }
}
/*=================== END: Small Tablet Step | 606–610 ===================*/

/*=================== START: Small Tablet Step | 611–615 ===================*/
@media (min-width: 611px) and (max-width: 615.98px){
  :root{ --services-top: 220px; --services-right: 216px; }
}
/*=================== END: Small Tablet Step | 611–615 ===================*/

/*=================== START: Small Tablet Step | 616–620 ===================*/
@media (min-width: 616px) and (max-width: 620.98px){
  :root{ --services-top: 220px; --services-right: 218px; }
}
/*=================== END: Small Tablet Step | 616–620 ===================*/

/*=================== START: Small Tablet Step | 621–625 ===================*/
@media (min-width: 621px) and (max-width: 625.98px){
  :root{ --services-top: 220px; --services-right: 220px; }
}
/*=================== END: Small Tablet Step | 621–625 ===================*/

/*=================== START: Small Tablet Step | 626–630 ===================*/
@media (min-width: 626px) and (max-width: 630.98px){
  :root{ --services-top: 220px; --services-right: 218px; }
}
/*=================== END: Small Tablet Step | 626–630 ===================*/

/*=================== START: Small Tablet Step | 631–635 ===================*/
@media (min-width: 631px) and (max-width: 635.98px){
  :root{ --services-top: 220px; --services-right: 220px; }
}
/*=================== END: Small Tablet Step | 631–635 ===================*/

/*=================== START: Small Tablet Step | 636–640 ===================*/
@media (min-width: 636px) and (max-width: 640.98px){
:root{ --services-top: 220px; --services-right: 220px; }
}
/*=================== END: Small Tablet Step | 636–640 ===================*/

/*=================== START: Small Tablet Step | 641–645 ===================*/
@media (min-width: 641px) and (max-width: 645.98px){
 :root{ --services-top: 220px; --services-right: 218px; }
}
/*=================== END: Small Tablet Step | 641–645 ===================*/

/*=================== START: Small Tablet Step | 646–650 ===================*/
@media (min-width: 646px) and (max-width: 650.98px){
:root{ --services-top: 220px; --services-right:218px; }
}
/*=================== END: Small Tablet Step | 646–650 ===================*/

/*=================== START: Small Tablet Step | 651–655 ===================*/
@media (min-width: 651px) and (max-width: 655.98px){
:root{ --services-top: 220px; --services-right: 215px; }
}
/*=================== END: Small Tablet Step | 651–655 ===================*/

/*=================== START: Small Tablet Step | 656–660 ===================*/
@media (min-width: 656px) and (max-width: 660.98px){
 :root{ --services-top: 220px; --services-right: 219px; }
}
/*=================== END: Small Tablet Step | 656–660 ===================*/

/*=================== START: Small Tablet Step | 661–665 ===================*/
@media (min-width: 661px) and (max-width: 665.98px){
 :root{ --services-top: 220px; --services-right: 217px; }
}
/*=================== END: Small Tablet Step | 661–665 ===================*/

/*=================== START: Small Tablet Step | 666–670 ===================*/
@media (min-width: 666px) and (max-width: 670.98px){
  :root{ --services-top: 220px; --services-right: 218px; }
}
/*=================== END: Small Tablet Step | 666–670 ===================*/

/*=================== START: Small Tablet Step | 671–675 ===================*/
@media (min-width: 671px) and (max-width: 675.98px){
 :root{ --services-top: 220px; --services-right: 213px; }
}
/*=================== END: Small Tablet Step | 671–675 ===================*/

/*=================== START: Small Tablet Step | 676–680 ===================*/
@media (min-width: 676px) and (max-width: 680.98px){
 :root{ --services-top: 220px; --services-right: 214px; }
}
/*=================== END: Small Tablet Step | 676–680 ===================*/

/*=================== START: Small Tablet Step | 681–685 ===================*/
@media (min-width: 681px) and (max-width: 685.98px){
   :root{ --services-top: 220px; --services-right: 215px; }
}
/*=================== END: Small Tablet Step | 681–685 ===================*/

/*=================== START: Small Tablet Step | 686–690 ===================*/
@media (min-width: 686px) and (max-width: 690.98px){
  :root{ --services-top: 225px; --services-right: 207px; }
}
/*=================== END: Small Tablet Step | 686–690 ===================*/

/*=================== START: Small Tablet Step | 691–695 ===================*/
@media (min-width: 691px) and (max-width: 695.98px){
  :root{ --services-top: 230px; --services-right: 205px; }
}
/*=================== END: Small Tablet Step | 691–695 ===================*/

/*=================== START: Small Tablet Step | 696–700 ===================*/
@media (min-width: 696px) and (max-width: 700.98px){
  :root{ --services-top: 230px; --services-right: 206px; }
}
/*=================== END: Small Tablet Step | 696–700 ===================*/

/*=================== START: Small Tablet Step | 701–705 ===================*/
@media (min-width: 701px) and (max-width: 705.98px){
 :root{ --services-top: 230px; --services-right: 207px; }
}
/*=================== END: Small Tablet Step | 701–705 ===================*/

/*=================== START: Small Tablet Step | 706–710 ===================*/
@media (min-width: 706px) and (max-width: 710.98px){
   :root{ --services-top: 230px; --services-right: 208px; }
}
/*=================== END: Small Tablet Step | 706–710 ===================*/

/*=================== START: Small Tablet Step | 711–715 ===================*/
@media (min-width: 711px) and (max-width: 715.98px){
  :root{ --services-top: 230px; --services-right: 207px; }
}
/*=================== END: Small Tablet Step | 711–715 ===================*/

/*=================== START: Small Tablet Step | 716–720 ===================*/
@media (min-width: 716px) and (max-width: 720.98px){
  :root{ --services-top: 230px; --services-right: 205px; }
}
/*=================== END: Small Tablet Step | 716–720 ===================*/

/*=================== START: Small Tablet Step | 721–725 ===================*/
@media (min-width: 721px) and (max-width: 725.98px){
  :root{ --services-top: 230px; --services-right: 207px; }
}
/*=================== END: Small Tablet Step | 721–725 ===================*/

/*=================== START: Small Tablet Step | 726–730 ===================*/
@media (min-width: 726px) and (max-width: 730.98px){
  :root{ --services-top: 230px; --services-right: 208px; }
}
/*=================== END: Small Tablet Step | 726–730 ===================*/

/*=================== START: Small Tablet Step | 731–735 ===================*/
@media (min-width: 731px) and (max-width: 735.98px){
  :root{ --services-top: 237px; --services-right: 200px; }
}
/*=================== END: Small Tablet Step | 731–735 ===================*/

/*=================== START: Small Tablet Step | 736–740 ===================*/
@media (min-width: 736px) and (max-width: 740.98px){
  :root{ --services-top: 237px; --services-right: 201px; }
}
/*=================== END: Small Tablet Step | 736–740 ===================*/

/*=================== START: Small Tablet Step | 741–745 ===================*/
@media (min-width: 741px) and (max-width: 745.98px){
  :root{ --services-top: 237px; --services-right: 201px; }
}
/*=================== END: Small Tablet Step | 741–745 ===================*/

/*=================== START: Small Tablet Step | 746–750 ===================*/
@media (min-width: 746px) and (max-width: 750.98px){
  :root{ --services-top: 240px; --services-right: 202px; }
}
/*=================== END: Small Tablet Step | 746–750 ===================*/

/*=================== START: Small Tablet Step | 751–755 ===================*/
@media (min-width: 751px) and (max-width: 755.98px){
  :root{ --services-top: 237px; --services-right: 202px; }
}
/*=================== END: Small Tablet Step | 751–755 ===================*/

/*=================== START: Small Tablet Step | 756–760 ===================*/
@media (min-width: 756px) and (max-width: 760.98px){
  :root{ --services-top: 249px; --services-right: 200px; }
}
/*=================== END: Small Tablet Step | 756–760 ===================*/

/*=================== START: Small Tablet Step | 761–765 ===================*/
@media (min-width: 761px) and (max-width: 765.98px){
  :root{ --services-top: 245px; --services-right: 199px; }
}
/*=================== END: Small Tablet Step | 761–765 ===================*/

/*=================== START: Small Tablet Step | 766–767 ===================*/
@media (min-width: 766px) and (max-width: 767.98px){
  :root{ --services-top: 248px; --services-right:198px; }
}
/*=================== END: Small Tablet Step | 766–767 ===================*/

/*=================== END: Small Tablet / Mini | 576–767 ===================*/